<!DOCTYPE html>
<html lang="en">

<head></head>

<body>
    <!-- 列表1：使用index作为key -->
    <div>张三-----key=0</div>
    <div>张四-----key=1</div>
    <!-- 创建一个新的div，此时张三和张四需要重新创建 -->
    <div>张五-----key=0</div>
    <div>张三-----key=1</div>
    <div>张四-----key=2</div>

    <!-- 列表2：使用id作为key -->
    <div>张三-----key='1001'</div>
    <div>张四-----key='1002'</div>
     <!-- 创建一个新的div，此时张三和张四不需要重新创建，只需要创建张五即可 -->
     <div>张五-----key='1002'</div>
     <div>张三-----key='1001'</div>
     <div>张四-----key='1002'</div>
</body>

</html>